"use client"
/**
 * 该滚动动画用的是gsap库。这个库的功能强大到离谱，能灵活运用能做出很多效果，我也只学了点皮毛，有兴趣可以学学完善一下
 */
import { useEffect, useRef,useState } from "react"
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';
import { Image,Drawer,Tabs,Divider } from 'antd'
import { cn } from "@/lib/util";
import style from "./index.module.css"
import Link from "next/link";

/**YY滚动动画 */
export default function Start() {
    /**YY logo 和 'YYAI开放平台'艺术字 */
    const YYbox = useRef<HTMLDivElement | null>(null)
    /**'构建万物互联的AI世界' 导航栏 */
    const navBox = useRef<HTMLDivElement | null>(null)
    /**顶上的一个盒子 */
    const top1 = useRef<HTMLDivElement | null>(null)
     /**顶上的一个盒子 */
    const top2 = useRef<HTMLDivElement | null>(null)
    /**
     * 以下的盒子均为动画彩色盒子，可以在浏览器页面看一个个盒子对应哪个
     */

    const divRef1 = useRef<HTMLDivElement | null>(null)
    const divRef2 = useRef<HTMLDivElement | null>(null)
    const divRef3 = useRef<HTMLDivElement | null>(null)
    const divRef4 = useRef<HTMLDivElement | null>(null)
    const divRef5 = useRef<HTMLDivElement | null>(null)
    const divRef6 = useRef<HTMLDivElement | null>(null)
    const divRef7 = useRef<HTMLDivElement | null>(null)
    const divRef8 = useRef<HTMLDivElement | null>(null)
    const divRef9 = useRef<HTMLDivElement | null>(null)
    const divRef10 = useRef<HTMLDivElement | null>(null)
    const divRef11 = useRef<HTMLDivElement | null>(null)
    const divRef12 = useRef<HTMLDivElement | null>(null)

    useEffect(() => {
        //以下是动画的核心代码
        gsap.registerPlugin(ScrollTrigger);
        /**时间线和时间线配置 */
        let t1 = gsap.timeline({
            scrollTrigger: {
                trigger: '.animationCantainer',
                start: 'top top',
                end: `+=2000px`,
                pin: true,
                scrub: true,
            }
        })

        t1.fromTo(top1.current, {
            scale: 1,
            opacity: 0.2,
            x: 600,
            y: 0,
        }, {
            scale: 2,
            opacity: 1,
            x: 600,
            y: -500
        }, 0)

        t1.fromTo(top2.current, {
            scale: 1,
            opacity: 0.2,
            x: 850,
            y: 35,
        }, {
            scale: 2,
            opacity: 1,
            x: 950,
            y: -500
        }, 0)

        t1.fromTo(divRef1.current, {
            scale: 1.2,
            opacity: 0.4,
            x: 150,
            y: 100,
        }, {
            opacity: 1,
            x: -300,
            y: -350,
            scale: 2.0,
            duration: 1,
        }, 0)
        t1.fromTo(divRef2.current, {
            scale: 1.2,
            opacity: 0.4,
            x: 170,
            y: 550,
        }, {
            opacity: 1,
            x: -280,
            y: 1000,
            scale: 2,
            duration: 1,
        }, 0)
        t1.fromTo(divRef3.current, {
            scale: 1.2,
            opacity: 0.4,
            x: 1400,
            y: 100,
        }, {
            opacity: 1,
            x: 1850,
            y: -350,
            scale: 2,
            duration: 1,
        }, 0)
        t1.fromTo(divRef4.current, {
            scale: 1.2,
            opacity: 0.4,
            x: 1400,
            y: 550,
        }, {
            opacity: 1,
            x: 1850,
            y: 1000,
            scale: 2,
            duration: 1,
        }, 0)


        t1.fromTo(divRef5.current, {
            scale: 0.8,
            opacity: 0.4,
            x: 320,
            y: 300,
        }, {
            opacity: 1,
            x: -130,
            y: -150,
            scale: 1.5,
            duration: 2,
        }, 0)
        t1.fromTo(divRef6.current, {
            scale: 0.8,
            opacity: 0.4,
            x: 420,
            y: 420,
        }, {
            opacity: 1,
            x: -30,
            y: 870,
            scale: 1.5,
            duration: 2,
        }, 0)
        t1.fromTo(divRef7.current, {
            scale: 0.8,
            opacity: 0.4,
            x: 1200,
            y: 300,
        }, {
            opacity: 1,
            x: 1700,
            y: -200,
            scale: 1.5,
            duration: 2,
        }, 0)
        t1.fromTo(divRef8.current, {
            scale: 0.8,
            opacity: 0.4,
            x: 1050,
            y: 400,
        }, {
            opacity: 1,
            x: 1500,
            y: 850,
            scale: 1.5,
            duration: 2,
        }, 0)


        t1.fromTo(divRef9.current, {
            scale: 0.5,
            opacity: 0.4,
            x: 650,
            y: 410,
        }, {
            opacity: 1,
            x: -200,
            y: -40,
            scale: 1.5,
            duration: 3,
        }, 0)
        t1.fromTo(divRef10.current, {
            scale: 0.5,
            opacity: 0.4,
            x: 750,
            y: 520,
        }, {
            opacity: 1,
            x: 300,
            y: 970,
            scale: 1.5,
            duration: 3,
        }, 0)
        t1.fromTo(divRef11.current, {
            scale: 0.5,
            opacity: 0.4,
            x: 950,
            y: 400,
        }, {
            opacity: 1,
            x: 1500,
            y: -150,
            scale: 1.5,
            duration: 3,
        }, 0)
        t1.fromTo(divRef12.current, {
            scale: 0.5,
            opacity: 0.4,
            x: 850,
            y: 100,
        }, {
            opacity: 1,
            x: 1300,
            y: -350,
            scale: 1.5,
            duration: 3,
        }, 0)

        // t1.to(YYbox.current, {
        //     scale: 2
        // }, 0)
        t1.fromTo(YYbox.current, {
            scale: 0,
        }, {
            scale: 2,
            duration: 3,
        }, 0)

        t1.to(YYbox.current, {
            top: -200
        }, 2)

        t1.fromTo(navBox.current, {
            scale: 0
        }, {
            scale: 2
        }, 2)
    })
    return (
        <div className="animationCantainer w-[100vw] h-[100vh] relative bg-[#040506] overflow-hidden">
            <div className="w-full h-[300px] bg-gradient-to-b from-[#262640] to-[#040506]">

            </div>
            <div ref={YYbox} className="absolute flex flex-col justify-center items-center" style={{ top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }}>
                <Image width={140} height={140} preview={false} src="/logo.png" />
                <div className={cn(style.title, "text-white self-end mt-[50px]")} style={{ fontSize: `${90}px`, lineHeight: `${110}px` }}>
                    {'YYAI开放平台'}
                </div>
            </div>
            <div ref={navBox} className="text-[#fff] absolute w-full flex flex-col justify-center items-center" style={{ top: '50%', transform: 'translateY: -50%' }}>
                <div className="text-[25px]">构建万物互联的AI世界</div>
                <div className="flex justify-between w-[350px] mt-[15px] bg-[#15171b] px-[40px] py-[70px] rounded-2xl">
                    <ShowProduct/>
                    <Link href={'javascript:;'}>
                        <i className="iconfont icon-jiejuefangan-02 text-[#ffe7b8]" style={{ fontSize: '35px' }}></i>
                        <div className="text-[10px]">解决方案</div>
                    </Link>
                    <Link href={'javascript:;'}>
                        <div>
                            <i className="iconfont icon-jieruzhinan text-[#00af42]" style={{ fontSize: '35px' }}></i>
                            <div className="text-[10px]">接入指南</div>
                        </div>
                    </Link>
                </div>
            </div>
            <div ref={top1} className="absolute top-[100px] w-[100px] h-[100px] bg-[#8f35ff] rounded-2xl"></div>
            <div ref={top2} className="absolute top-[100px] w-[100px] h-[100px] bg-[#8f35ff] rounded-2xl"></div>
            <div ref={divRef1} className="absolute top-[100px] w-[100px] h-[100px] bg-[#8f35ff] rounded-2xl"></div>
            <div ref={divRef2} className="absolute top-[200px] w-[100px] h-[100px] bg-[#8f35ff] rounded-2xl"></div>
            <div ref={divRef3} className="absolute top-[100px] w-[100px] h-[100px] bg-[#0063ff] rounded-2xl"></div>
            <div ref={divRef4} className="absolute top-[200px] w-[100px] h-[100px] bg-[#007fff] rounded-2xl"></div>
            <div ref={divRef5} className="absolute top-[100px] w-[100px] h-[100px] bg-[#ff5f00] rounded-2xl"></div>
            <div ref={divRef6} className="absolute top-[200px] w-[100px] h-[100px] bg-[#ff5f00] rounded-2xl"></div>
            <div ref={divRef7} className="absolute top-[100px] w-[100px] h-[100px] bg-[#00ba46] rounded-2xl"></div>
            <div ref={divRef8} className="absolute top-[200px] w-[100px] h-[100px] bg-[#76d2ff] rounded-2xl"></div>
            <div ref={divRef9} className="absolute top-[100px] w-[100px] h-[100px] bg-[#2079ea] rounded-2xl"></div>
            <div ref={divRef10} className="absolute top-[200px] w-[100px] h-[100px] bg-[#2079ea] rounded-2xl"></div>
            <div ref={divRef11} className="absolute top-[100px] w-[100px] h-[100px] bg-[#2079ea] rounded-2xl"></div>
            <div ref={divRef12} className="absolute top-[200px] w-[100px] h-[100px] bg-[#2079ea] rounded-2xl"></div>
        </div>
    )
}
const ShowProduct=()=>{
    const [open, setOpen] = useState<boolean>(false);
    const drawerInfo=[
        {
            title:"AIGC",
            content:["AI图生图","数字人播报"]
        },
        {
            title:"图像技术",
            content:["绿幕抠图","自然场景抠图","超分","文字识别","高清美颜"]
        },
        {
            title:"人脸与人体",
            content:["人脸关键点识别","人脸检测","人脸对比","3D人脸重建","人体关键点识别","手势识别"]
        },
        {
            title:"混合现实",
            content:["实时虚拟形象驱动","虚拟打光"]
        },
        {
            title:"音频技术",
            content:["语音识别（ASR）","语音合成（TTS）"]
        },
        {
            title:"视频技术",
            content:["视频安全审核"]
        },
        {
            title:"智能视觉平台",
            content:["高性能推理引擎","图形渲染引擎"]
        },
    ]
    const DrawerContent=({title,content}:{title:string,content:string[]})=>{
        return (
            <>
                <div className="text-lg text-[#f8d435] mt-5">{title}</div>
                <Divider style={{color:"gray"}}/>
                { content.map((k:string,i:number)=>
                <Link key={i} href={`/techDetail?title=${k}`}>
                    <div className="mt-5 text-base text-[#000] font-semibold hover:text-[#f8d435] transition duration-300 ease-in-out">{k}</div>
                </Link>
                )}
            </>
        )
    }
    return (
        <>
        <div onClick={()=>setOpen(true)} className="cursor-pointer">
            <i className="iconfont icon-chanpinfuwu text-[#fb754c]" style={{ fontSize: '35px' }}></i>
            <div className="text-[10px]" >产品服务</div>
        </div>
        <Drawer
            closable
            destroyOnClose
            title={<p>产品服务</p>}
            placement="top"
            open={open}
            onClose={() => setOpen(false)}
        >
           <Tabs
                tabPosition="left"
                items={drawerInfo.map((k, i) => {
                    const id = String(i);
                    return {
                        label: `${k.title}`,
                        key: id,
                        children: <DrawerContent title={k.title} content={k.content}/>,
                    };
                })}
            />
        </Drawer>
        </>
    )
}